<template>
  <div id="updatePassword">
    <el-divider content-position="left"><strong><ins>{{update_password_title}}</ins></strong></el-divider>
    <div class="update_password_box">
      <el-form :model="updateRuleForm" status-icon :rules="rules" ref="updateRuleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="updateRuleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="updateRuleForm.pass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="updateRuleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" >
          <div class="flex-layout align-center">
            <el-input v-model="updateRuleForm.code" placeholder="请输入验证码" style="width: 60%"></el-input>
            <div style="height: 40px">
              <img src="http://127.0.0.1:8080/getVerify" style="height: 40px;">
            </div>
          </div>
        </el-form-item>
        <el-form-item>
<!--          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
          <el-button @click="resetFormBtn">确认修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'updatePassword',
  data () {
    // 表单验证函数
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    // var validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'))
    //   } else {
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleForm.validateField('checkPass')
    //     }
    //     callback()
    //   }
    // }
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'))
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error('两次输入密码不一致!'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      update_password_title: '修改密码',
      updateRuleForm: {
        oldPass: null,
        pass: '',
        checkPass: '',
        age: '',
        code: ''
      },
      rules: {
        oldPass: [
          { required: true, message: '原密码不能为空', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '新密码不能为空', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormBtn () {
      // this.$refs[formName].resetFields()
      console.log(this.updateRuleForm)
      this.$axios.get('/user/reset', {
        params: {
          tel: this.$store.state.vuex_user_Info.uPhone,
          pwd: this.updateRuleForm.pass
        }
      }).then(response => {
        console.log(response)
        if (response.data.message === '重置成功') {
          this.$message({
            message: '账号:' + this.$store.state.vuex_user_Info.uPhone + '[' + response.data.message + '] 密码重置为:' + 12345678,
            type: 'success'
          })
          this.$axios.get('/user/loginUser', {
            params: {
              tel: this.$store.state.vuex_user_Info.uPhone,
              pwd: this.updateRuleForm.pass
            }
          }).then(response => {
            console.log(response)
            if (response.data.message === '登录成功') {
              // 存储用户信息
              this.$store.commit('updateUserInfo', response.data.data)
              console.log(this.$store.state.vuex_user_Info)
            } else {
              this.$message.error(response.data.message)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  #updatePassword {
    width: 100%;
    background: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .update_password_box{
      width: 60%;
      /*background: red;*/

    }
  }
</style>
